<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统 - 编辑</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <style>
        .cover-preview {
            max-width: 200px;
            max-height: 300px;
            margin: 10px 0;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .cover-upload {
            border: 2px dashed #ccc;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .cover-upload:hover {
            border-color: #007bff;
            background: rgba(0,123,255,0.05);
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    
    <div class="container mt-5">
        <h2 class="mb-4 text-center" th:text="${book.id == null ? '添加新书' : '编辑图书'}">添加/编辑图书</h2>
        
        <form th:action="@{${book.id == null ? '/books/add' : '/books/edit/' + book.id}}" 
              method="post" 
              th:object="${book}" 
              class="mt-3"
              enctype="multipart/form-data">
            <input type="hidden" th:field="*{id}">
            <input type="hidden" th:field="*{coverUrl}">
            
            <div class="row">
                <div class="col-md-8">
                    <div class="mb-4">
                        <label for="title" class="form-label">书名</label>
                        <input type="text" class="form-control form-control-lg" id="title" th:field="*{title}" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="author" class="form-label">作者</label>
                        <input type="text" class="form-control form-control-lg" id="author" th:field="*{author}" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="description" class="form-label">描述</label>
                        <textarea class="form-control" id="description" th:field="*{description}" rows="4"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label for="price" class="form-label">价格</label>
                            <div class="input-group">
                                <span class="input-group-text">¥</span>
                                <input type="number" class="form-control form-control-lg" id="price" th:field="*{price}" step="0.01" min="0" required>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-4">
                            <label for="stock" class="form-label">库存</label>
                            <input type="number" class="form-control form-control-lg" id="stock" th:field="*{stock}" min="0" required>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="mb-4">
                        <label class="form-label">封面图片</label>
                        <div class="cover-upload" onclick="document.getElementById('coverFile').click()">
                            <img th:if="${book.coverUrl}" th:src="${book.coverUrl}" class="cover-preview" id="coverPreview">
                            <img th:unless="${book.coverUrl}" src="/img/default-cover.jpg" class="cover-preview" id="coverPreview">
                            <div class="mt-2">点击上传封面图片</div>
                        </div>
                        <input type="file" id="coverFile" name="coverFile" accept="image/*" style="display: none;" onchange="previewImage(this)">
                    </div>
                </div>
            </div>
            
            <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                <a th:href="@{/books}" class="btn btn-secondary btn-lg me-md-2">返回</a>
                <button type="submit" class="btn btn-primary btn-lg">保存</button>
            </div>
        </form>
    </div>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        particlesJS('particles-js', {
            particles: {
                number: { value: 80, density: { enable: true, value_area: 800 } },
                color: { value: '#ffffff' },
                shape: { type: 'circle' },
                opacity: { value: 0.5, random: false },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: '#ffffff',
                    opacity: 0.4,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 6,
                    direction: 'none',
                    random: false,
                    straight: false,
                    out_mode: 'out',
                    bounce: false
                }
            },
            interactivity: {
                detect_on: 'canvas',
                events: {
                    onhover: { enable: true, mode: 'repulse' },
                    onclick: { enable: true, mode: 'push' },
                    resize: true
                }
            },
            retina_detect: true
        });

        function previewImage(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('coverPreview').src = e.target.result;
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
</body>
</html> 